<template>
  <div>
    <el-dialog @close="handleClose" :lock-scroll='false' close-on-press-escape v-dialogDrag title="设备状态详情" :close-on-click-modal="false" :visible.sync="showDialog">
      <div style="position: relative;height:150px">
        <div class="dividing-line"></div>
        <div class="text">详情</div>
        <div class="textFlex">
          <div class="commandToken">Token ：{{tabstatus.token}}</div>
          <div class="commandName">名称 ：{{tabstatus.name}}</div>
          <div class="nominate">状态码 ：{{tabstatus.code}}</div>
          <span><div class="statusColor">颜色：<div class="bgcColor" :style="{background:tabstatus.backgroundColor}"></div></div></span>
        </div>
      </div>

      <div style="position: relative;height:110px">
        <div class="dividing-line"></div>
        <div class="text">元数据</div>
        <el-table :data="metadataArr" style="width: 100%" height='100' size='mini'>
          <el-table-column prop="key" label="键">
          </el-table-column>
          <el-table-column prop="value" label="值">
          </el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button size="mini" @click="openStatusEdit" v-show="editShowLog">编 辑</el-button>
        <el-button size="mini" type="primary" @click="showDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    StatusDetailsshow: {
      type: Boolean,
      default: false
    },
    tabstatus: {
      type: Object,
      default: false
    },
    editShow: {
      type: Boolean
    }
  },
  data() {
    return {
      editShowLog: true,
      showDialog: false,
      commandGetToken: '',
      metadata: [{
        key: 'key',
        value: 'value',
      }, {
        key: 'key',
        value: 'value',
      }],
      commandsListToken: '',
      metadataArr: []
    }
  },
  watch: {
    editShow(newVal,oldVal){
      this.editShowLog = newVal
    },
    StatusDetailsshow(oldVal, newVal) {
      this.showDialog = this.StatusDetailsshow
    },
    tabstatus: {
      handler(newVal, oldVal) {
        let arr = []
        let keyArr = Object.keys(this.tabstatus.metadata)
        keyArr.forEach(item => {
          this.tabstatus.metadata[item]
          arr.push({
            key: item,
            value: this.tabstatus.metadata[item]
          })
        })
        this.metadataArr = arr
      }
    }
  },
  mounted() {
  },
  methods: {
    // 弹窗关闭改变参数
    handleClose() {
      this.$emit('changeShow', 'false')
    },
    // 弹窗取消键
    cancel() {
      this.$emit('changeShow', 'false')
    },
    //设备状态详情弹窗打开状态编辑
    openStatusEdit() {
      this.$emit('detailsOpenDteails', this.tabstatus, true)
    },
    // 列表转换布尔值
    formatter(row, index) {
      if (row.required == true) {
        row.required = "是"
      }
      if (row.required == false) {
        row.required = "否"
      }
      return row.required
    },
  }
}
</script>

<style scoped>
.dividing-line {
  display: inline-block;
  height: 24px;
  width: 4px;
  margin: 0 10px;
  vertical-align: middle;
  background-color: #2680d2;
}
.text {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  position: absolute;
  top: 2px;
  left: 20px;
}
.textFlex {
  margin:15px 0 0 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.commandToken {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.commandName {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nominate {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statusColor {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bgcColor {
  width: 26px;
  height: 24px;
  float: right;
}
</style>